<!-- 2层Tab组件 -->
<template>
	<view>
		<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft1">
			<view class="item" :class="index==tabCurr?('cur '+focusClass):normalClass" v-for="(item,index) in tabItems" :key="index" @tap="tabSelect1" :data-id="index">
				<view class="lay-c-c-col">
					<view>
						{{tabItems[index].name}}	
					</view>
					<view class="cur-flag">&nbsp;&nbsp;</view>
				</view>
			</view>
		</scroll-view>
		
		<scroll-view scroll-x class="nav mg-t-lg" scroll-with-animation :scroll-left="scrollLeft2">
			<view class="item" 
			v-for="(subitem,subidx) in tabItems[tabCurr].subItems" 
			:key="subidx" @tap="tabSelect2" :data-id="subidx"
			:class="subidx==tabItems[tabCurr].subCurr?('cur '+focusClass):normalClass" 
			>
				<view class="lay-c-c-col">
					<view>
						{{subitem.name}}	
					</view>
					<view class="cur-flag">&nbsp;&nbsp;</view>
				</view>
			</view>
		</scroll-view>	
	</view>
</template>

<script>
	export default {
		name:"MyTab2",
		data() {
			return {
				tabCurr: this.curr,
				scrollLeft1: 0,
				scrollLeft2: 0,
			};
		},
		props: {
			items: {
				type: Array,
				required: true,
				default: [{
					name:'tab1',
					subCurr: 0,
					subItems: [
						{
							name: "subtab1",
						},
						{
							name: "subtab2",
						}
					]
				},{
					name:'tab2',
					subCurr: 0,
					subItems: [
						{
							name: "subtab3",
						}
					]
				}]
			},
			curr: {
				type: Number,
				required: false,
				default: 0
			},
			focusClass: {
				type: String,
				required: false,
				default: "red"
			},
			normalClass: {
				type: String,
				required: false,
				default: ""
			},
			onChange: {
				type: Function,
				required: false,
				default: ()=>{}
			},
			itemWidth: {
				type: Number,
				required: false,
				default: 100
			},
		},
		computed: {
			tabItems() {
				let items = this.items;
				items.forEach(a=>{
					if(typeof a.scrollLeft2 === 'undefined')
						a.scrollLeft2 = 0;
				})
				return items;
			}
		},
		watch: {
			curr(newVal, oldVal) {
				// console.log("curr change", newVal);
				this.tabCurr = newVal;
			},
		},
		methods: {
			tabSelect1(e) {
				let last = this.tabCurr;
				this.tabCurr = e.currentTarget.dataset.id;
				
				this.scrollLeft1 = e.currentTarget.dataset.id * this.itemWidth;
				this.$nextTick(()=>{
					this.scrollLeft2 = this.items[this.tabCurr].scrollLeft2; 
				})
				console.log(`tabSelect1, this.tabCurr=${this.tabCurr}, this.scrollLeft1=${this.scrollLeft1}`, e)
				
				let subItems = this.items[this.tabCurr].subItems;
				let subCurr = this.items[this.tabCurr].subCurr;
				
				if(this.onChange)
					this.onChange(this.tabCurr, subCurr, last, subCurr);
			},
			
			tabSelect2(e) {
				let last = this.items[this.tabCurr].subCurr;
				
				let subCurr = e.currentTarget.dataset.id;
				this.items[this.tabCurr].subCurr = subCurr;
				
				this.scrollLeft2 = (e.currentTarget.dataset.id - 1) * this.itemWidth;
				this.items[this.tabCurr].scrollLeft2 = this.scrollLeft2;
				// console.log(`tabSelect2, this.items[${this.tabCurr}].scrollLeft2=${this.scrollLeft2}`);
				
				// console.log(`tabSelect2, curr=${this.tabCurr}, subcur=${subCurr}`);
				
				if(this.onChange)
					this.onChange(this.tabCurr, subCurr, this.tabCurr, last);
			},
			
			f1(subitem) {
				console.log(subitem)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/leui.scss";
	/* scroll-view {
		background-color: white;
	} */
</style>
